<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen"  @close="onClose" title="创建子分类" >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="125px"
               label-position="left"
      >
        <el-form-item label="选择父分类" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in field101Options" :key="index" :label="item.parentCategoryName"
                       :value="item.parentCategoryId" :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生成的主关键词" prop="categoryName">
          <el-input v-model="formData.categoryName" placeholder="请输入你要生成的主关键词" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCategory,
  getCategory,
  delCategory,
  addCategory,
  updateCategory,
  listCategoryParentId,
  verifyCategory
} from '@/api/dict/category'

export default {
  name: 'addGroups',
  inheritAttrs: false,
  components: {},
  props: {
    field101Options: {
      type: Array,
      default: () => [{
        "parentCategoryName": "默认数据1",
        "parentCategoryId": 1
      }, {
        "parentCategoryName": "默认数据2",
        "parentCategoryId": 2
      }]
    }
  },
  data() {
    return {
      formData: {
        parentId: undefined,
        categoryName: undefined
      },
      rules: {
        parentId: [{
          required: true,
          message: '请选择父级名称',
          trigger: 'change'
        }],
        categoryName: [{
          required: true,
          message: '请输入你的主关键词',
          trigger: 'change'
        },{
          validator: async (rule, value, callback) => {
            // 调用API请求检查数据是否存在
            const result = await verifyCategory({ categoryName: value });
            const count = parseInt(result.data, 10);
            if (count >= 1) {
              // 如果数据已存在（大于等于1），抛出错误
              throw new Error("名称已存在！");
            }
          },
          trigger: 'change'
        }
        ]
      },
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submit() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          addCategory(this.formData).then(response => {
            console.log(response);
            this.$modal.msgSuccess("新增成功");
            this.$refs['elForm'].resetFields()
            this.$emit('update:visible', false);
            this.close();
          });
        }
      });
    },
    onOpen() {

    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>

</style>
